<template>
  <div class="subject-list">
    <div class="addsubject">
      <div class="action-box" @click="addSubject">
        <span class="icon-addicon"></span>
        <span>新增</span>
      </div>
    </div>
    <!--内容区域-->
    <div class="subjectcontent">
      <div class="contenthead">
        <span class="headitem">编号</span>
        <span class="headitem" style="width: 20%">专题名称</span>
        <span class="headitem">专题轮播图</span>
        <span class="headitem"style="width: 18%">操作时间</span>
        <span class="headitem">操作人员</span>
        <span class="headitem" style="margin-left: -30px">操作</span>
      </div>
      <div class="contentitems hairline-bottom" v-for="(item,index) in subjectList" :class="{greybg:index%2==1}">
        <span class="headitem">{{item.number}}</span>
        <span class="headitem" @click="querySubjectDetail(item.subjectId)" style="width: 20%">{{item.subjectName}}</span>
        <span class="headitem">
           <Poptip placement="right" trigger="hover" v-if="index<5">
              <img :src="item.picUrl" alt="pic" class="scaleimg">
              <div slot="content"><img :src="item.picUrl" alt="pic" class="bigImg"></div>
           </Poptip>
          <Poptip placement="right-end" trigger="hover" v-else>
              <img :src="item.picUrl" alt="pic" class="scaleimg">
              <div slot="content"><img :src="item.picUrl" alt="pic" class="bigImg"></div>
           </Poptip>
         </span>
        <span class="headitem" style="width: 18%">{{item.updateTime}}</span>
        <span class="headitem">{{item.handleUserName}}</span>
        <span class="headitem blue" style="margin-left: -30px">
            <span class="moveup" v-if="item.status==1&&(index!=0||pageNum!=1)" @click="shiftUpSubject(item)">上移</span>
           <span class="moveup hidemoveup" v-else>上移</span>
           <span class="subshow" v-if="item.status==1" @click="shelveOrUnshelveSubject(item)">下架</span>
           <span class="subshow" v-else @click="shelveOrUnshelveSubject(item)">上架</span>
           <span class="edit" @click="updateSubject(item.subjectId)">编辑</span>
         </span>
      </div>
    </div>
    <div class="allulitem list-nodata" v-if="subjectList.length==0">
      暂无数据
    </div>
    <div class="page" v-if="dataTotal>pageSize">
      <Page :total=dataTotal
            :pageSize=pageSize
            :current=pageNum
            @on-change="pageNumChange"
            show-total>
      </Page>
    </div>
    <!--提示框-->
    <Modal class="warning-modal"
           v-model="showWarnModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="warn-modal-body">
        <i class="modal-icon"></i>
        <p class="modal-content">{{warnContent}}</p>
      </div>
      <div slot="footer">
        <div class="warn-modal-footer">
          <span class="modal-close-btn" @click="closeModal">确定</span></div>
      </div>
    </Modal>
    <!--确认提示框-->
    <Modal class="confirm-modal"
           v-model="showConfirmModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="confirm-modal-body">
        <i class="modal-icon"></i>
        <p class="modal-content">{{confirmContent}}</p>
      </div>
      <div slot="footer">
        <div class="confirm-modal-footer">
          <span class="modal-close-btn" @click="queryShelveOrUnshelveSubject({'subjectId':thisSubId,'isShelve':thisSubStatus},subObject)">确定</span>
        <span class="modal-close-btn" @click="closeConfirmModal">取消</span></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import index from  "./subject-list.js"
  export default index ;
</script>
<style>
  .hairline-bottom {
    position: relative;
    border: none;
  }

  .hairline-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #DDDEE3;
    width: 100%;
    height: 1px;
    -webkit-transform: scale(1, .5);
    transform: scale(1, .5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  .subject-list {
    padding: 24px 30px 0 30px;
  }

  .addsubject {
    text-align: right;
    font-size: 14px;
    color: #45A2FF;
    margin-bottom: 46px;
  }
  .subject-list .action-box{
    width: 60px;
    float: right;
    position: relative;
  }
  .subject-list .action-box:after{
    content:'';
    width:200%;
    height:200%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
  }
  .addsubject span {
    cursor: pointer;
  }

  .icon-addicon {
    width: 16px;
    height: 16px;
    background-image: url("../img/add.png");
    margin-right: 5px;
    margin-bottom: -3px;
    display: inline-block;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
  }

  .contenthead, .contentitems {
    background: #EBF4FE;
    font-size: 16px;
    color: #424754;
    line-height: 50px;
  }

  .contentitems {
    line-height: 80px;
    color: #777E8C;
    background: #FFFFFF;
  }

  .headitem {
    display: inline-block;
    width: 15%;
    vertical-align: middle;
  }

  .contentitems .headitem:nth-child(2) {
    color: #3F94FC;
    cursor: pointer;
  }

  .headitem:nth-child(1) {
    text-indent: 50px;
  }

  .headitem:last-child {
    position: relative;
    text-align: center;
  }

  .scaleimg {
    width: 60px;
    height: 60px;
    vertical-align: middle;
    border-radius: 2px;
  }

  .moveup {
    display: inline-block;
    visibility: visible;
    margin-right: 20px;
  }

  .subshow {
    padding-right: 20px;
  }

  .hidemoveup {
    visibility: hidden;
  }

  .blue {
    color: #45A2FF;
  }

  .edit:hover, .subshow:hover, .moveup:hover {
    cursor: pointer;
  }

  .greybg {
    background: #FCFCFC;
  }
</style>
